<template>
  <view class="container screen-width">
    <view class="banner">
      <image mode="widthFix" :src="getImageUrl(detailInfo.fileImage)" @click="previewImage()" />
    </view>
    <!-- <view v-else class="banner flex-center flex items-middle">
      <view>暂无图片</view>
    </view>-->
    <view class="name flex items-middle">
      <view>{{detailInfo.fileName}}</view>
      <view class="down down">
        <!-- <img @click.stop="down" src="@/static/down.png" /> -->
        <view class="btn" @click.stop="down">下载</view>
      </view>
    </view>
    <view class="content">
      <view class="content-info" v-html="detailInfo.synopsis"></view>
    </view>
    <Festival></Festival>
  </view>
</template>

<script>
import { fileDetail, mobileDownload } from "../../util/api/file.js";
import { isWeixin, wxShareConfig } from "../../util/wx.js";
import { imgUrl } from "@/util/api.js";
import { getImage } from "@/util/getImage.js";
export default {
  data() {
    return {
      id: "",
      detailInfo: {}
    };
  },

  onLoad(e) {
    this.id = e.id;
    this.getDetail();
  },
  //方法集合
  methods: {
    // 预览轮播图
    previewImage() {
      let list = [];
      list[0] = this.getImageUrl(this.detailInfo.fileImage);
      WeixinJSBridge.invoke("imagePreview", {
        urls: list,
        current: 0
      });
    },
    getImageUrl(url) {
      return getImage(url);
    },
    getDetail() {
      fileDetail(this.id).then(res => {
        this.detailInfo = res.result;
        if (isWeixin()) {
          this.initShareConfig();
        }
      });
    },
    down() {
      let token = this.$getToken();
      if (!token) {
        uni.showToast({
          title: "您还没有登录，请登录后操作",
          duration: 2000,
          icon: "none"
        });
        setTimeout(() => {
          uni.setStorageSync("pageUrl", window.location.href);
          uni.navigateTo({
            url: "/pages/login/index"
          });
        }, 2000);
        return;
      }
      mobileDownload(this.id).then(res => {
        if (res.code == 200 && res.result) {
          window.location.href = imgUrl + res.result;
        } else {
          uni.showToast({
            title: "下载失败，请重试！",
            duration: 2000,
            icon: "none"
          });
        }
      });
    },
    initShareConfig() {
      let _this = this;
      let windowurl = window.location.href.split("#")[0];
      uni.request({
        url: "https://oldm.51bmj.cn/WeiXin/GetClientSign", //仅为示例，并非真实接口地址。
        data: {
          rawUrl: windowurl
        },
        dataType: "json",
        header: {
          "X-Requested-With": "XMLHttpRequest"
        },
        method: "GET",
        success: res => {
          if (res.statusCode == 200) {
            let { data } = res;
            let shareInfo = {
              title: "政策文件",
              desc: _this.detailInfo.fileName,
              link: window.location.href
            };
            wxShareConfig(this.$wx, data, shareInfo);
          }
        }
      });
    }
  }
};
</script>
<style>
body {
  user-select: text;
}
</style>
<style lang="scss" scoped>
.container {
  width: 100%;
  .banner {
    width: 100%;
    min-height: 350rpx;
    background: rgba(0, 0, 0, 0.05);
    image {
      width: 100%;
      // height: 350rpx;
    }
    view {
      // width: 100%;
      // height: 300rpx;
      color: #aaaaaa;
    }
  }
  .name {
    padding: 30rpx 30rpx 10rpx 30rpx;
    font-size: 20px;
    color: #333;
    font-weight: 700;
    .down {
      margin-left: 20rpx;
      .btn {
        padding: 14upx 0;
        border-radius: 10upx;
        min-width: 120upx;
        text-align: center;
        box-sizing: border-box;
        font-size: 24upx;
        color: #ffffff;
        background: red;
      }
    }
  }
  .content {
    padding: 20rpx 30rpx;
    user-select: text;
    box-sizing: border-box;
    overflow: scroll;
    .content-info {
      // min-height: 626rpx;
      user-select: text;
      font-size: 16px;
    }
  }
}
</style>